<template>
	<w-container id='market-list' class="bg-color-pageBg" :loading="loading">
		<w-navbar :placeholder="true" :leftIcon="opacity>0.8?'back-btn':'back-btn'"
			:titleStyle="{color:opacity>0.8?'#222':'#222'}" navType="marketGoods" bgColor="#fff" :title='title'
			:product='product'></w-navbar>
		<view class="rise-fall">
			<view class="left">
				<view class="value text-center" :class="riseFallColor">
					{{info.current_price}}CNY
				</view>
				<view class="bottom mt-12">
					<u-icon v-if="info.scale<0" size='26rpx' color='#59BB73' name='arrow-down-fill'></u-icon>
					<u-icon v-if="info.scale>0" size='26rpx' color='#FF1F00' name='arrow-up-fill'></u-icon>
					<text class="scale" :style="{color:`${info.scale<0?'#59BB73':'#ff1f00'}`}">{{info.scale}}%</text>
				</view>
			</view>
			<view class="right">
				<view class="item mb-4">
					<view class="value">￥{{info.today_max_price}}</view>
					<view class="label">今日最高</view>
				</view>
				<view class="item mb-4">
					<view class="value">{{info.today_volume}}</view>
					<view class="label">今日成交量</view>
				</view>
				<view class="item">
					<view class="value">￥{{info.today_min_price}}</view>
					<view class="label">今日最低</view>
				</view>
				<view class="item">
					<view class="value">{{info.one_hour_volume}}</view>
					<view class="label">1h成交量</view>
				</view>
			</view>
		</view>
		<view class="flex flex-js-center mt-16">
			<view class="flex flex-dir-col flex-ai-center font-color-999 mlr-12 type-item " v-for="item in typeMap"
				:class="{active:item.type==search.status}" :key="item.type" @click="changeType(item)">
				<view class="font-size-16 title">
					{{item.name && handleLang(item.name)}}
				</view>
				<view class="font-size-10">
					{{item.count}}单
				</view>
			</view>
		</view>
		<view class="plr-16 list">
			<view class="plr-8 ptb-16 flex font-color-textPrimary flex-js-sb item" v-for="(item,index) in list"
				:key="index">
				<text v-if="search.status==1">{{item.time && handleLang(item.time)}}</text>
				<view class="font-color-textPrimary font-size-14" v-if="search.status==1">
					#{{item.collection_code}}
					<text class="font-color-999 font-size-12">/{{item.total_num}}</text>
				</view>
				<view class="">
					￥{{item.price}}
				</view>
				<view class="font-size-14" v-if="search.status>1">
					{{item.number}}单
				</view>
			</view>

		</view>
		<w-loading class="mt-16" :type="loadingType" empty-type="search"></w-loading>
		<u-gap height="15"></u-gap>
	</w-container>
</template>

<script>
	import opacityMixin from '@/mixins/opacityNav.js'
	import {
		getMarketGoodsInfo,
	} from '@/api/market/index.js'
	import {
		getSellInfo
	} from '@/api/trad/index.js'
	export default {
		mixins: [opacityMixin],
		data() {
			return {
				loading: false,
				title: '买卖详情',
				product: {},
				id: null,
				search: {
					status: 1,
					page: 1
				},
				info: {},
				list: [],
				loadingType: 'none'
			}
		},
		computed: {
			typeMap() {
				return [{
						name: "成交记录",
						type: 1,
						count: this.info.transaction_record_number
					},
					{
						name: "当前求购",
						type: 2,
						count: this.info.current_buying
					},
					{
						name: "当前寄售",
						type: 3,
						count: this.info.current_consignment
					},
				]
			}
		},
		onPullDownRefresh() {
			this.getInfo()
		},
		onReachBottom() {
			let search = this.$tools.copyObj(this.search)
			search.page++
			if (this.list.length) search.last_id = this.list[this.list.length - 1].id
			this.getList(search)
		},
		onLoad({
			id
		}) {
			this.id = id;
			this.search.goods_id = this.id
			this.getInfo()
		},
		methods: {
			async getInfo() {
				this.loading = true;
				try {
					let {
						data
					} = await getMarketGoodsInfo({
						id: this.id,
						type: 2
					})
					this.product = data;
					this.product.goods_type = 2;
					this.product.isagreement = this.isagreement
					this.title = this.product.name
					delete this.search.last_id
					uni.setNavigationBarTitle({
						title: this.title
					})
					this.getList(this.search)
				} catch (e) {
					setTimeout(() => {
						this.backPage();
					}, 1500)
				} finally {
					uni.stopPullDownRefresh()
					this.loading = false;
				}
			},
			changeType({
				type
			}) {
				this.search.status = type;
				this.search.page = 1;
				this.loadingType = 'none'
				this.list = []
				delete this.search.last_id
				this.getList(this.search);
			},
			getList(search) {
				if (this.loadingType == 'loading' || this.loadingType == 'nomore') return;
				this.loadingType = 'loading'
				getSellInfo(search).then(res => {
					this.loadingType = 'none'
					let {
						list,
						current_buying,
						current_consignment,
						transaction_record_number,
						current_price,
						one_hour_volume,
						scale,
						today_max_price,
						today_min_price,
						today_volume,
						yesterday_min_price
					} = res.data;
					this.info = {
						current_buying,
						current_consignment,
						transaction_record_number,
						current_price,
						one_hour_volume,
						scale,
						today_max_price,
						today_min_price,
						today_volume,
						yesterday_min_price
					}
					if (search.page == 1) {
						this.list = []
					}
					if (list.length) {
						this.search = search;
					}
					if (list.length < 20) {
						this.loadingType = 'nomore'
					}
					this.list = this.list.concat(list)
				}).catch(e => {
					console.log(e)
					setTimeout(() => {
						this.backPage();
					}, 1500)
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F6F8;
	}
</style>
<style lang="scss">
	.rise-fall {
		background: #222;
		border-radius: 16rpx;
		border: 2rpx solid #D8D8D8;
		margin: 0 40rpx;
		margin-top: 24rpx;
		padding: 70rpx 42rpx;
		height: 352rpx;
		@extend .flex, .flex-ai-center, .flex-js-sb;

		.up {
			color: #FF1F00;
		}

		.down {
			color: #59BB73;
		}

		.left {
			width: 260rpx;
			@extend .flex, .flex-dir-col, .flex-ai-center;
			font-weight: 800;

			.value {
				width: 269rpx;
				font-size: 40rpx;
				@extend .font-color-white
			}

			.bottom {
				color: #fff;
				@extend .flex, .flex-ai-center;
				font-size: 26rpx;
			}
		}

		.right {
			flex: 1;
			@extend .flex, .flex-w, .flex-js-sb;

			.item {
				width: 160rpx;
				@extend .flex, .flex-dir-col;

				.label {
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
					text-align: center;
				}

				.value {
					font-size: 32rpx;
					font-weight: 800;
					color: #fff;
					margin-bottom: 8rpx;
					text-align: center;
				}
			}
		}
	}

	#market-list {
		// background-color: #fff;
	}

	.list {
		background-color: #F5F6F8;

		.item {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}
	}

	.sellInfo {
		width: 100%;
		height: 352rpx;
		background-image: url($IMG_URL + '/static/bg/sellInfo.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.type-item.active {
		@extend .font-color-textPrimary;
		position: relative;

		.title {
			@extend .font-w-600;
			position: relative;
			z-index: 2;
		}

		&::after {
			content: '';
			position: absolute;
			width: 130rpx;
			height: 12rpx;
			background: url($IMG_URL+'/static/bg/tab-line.png');
			background-size: cover;
			top: 26rpx;
			left: 0;
			z-index: 1;
		}

	}
</style>